import { Component } from 'react';
import { View, Text } from '@tarojs/components';
import CustomList from './CustomList';
import CustomInput from './CustomInput';


class Todo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [
        {
          id: 1,
          name: 'Vue'
        },
        {
          id: 2,
          name: 'React'
        },
        {
          id: 3,
          name: 'Angular'
        }
      ]
    }

  }
  addTodo = (value) => {
    let list = this.state.list;
    list.push({
      id: list.length + 1,
      name: value,
      finished: false
    })
    this.setState({
      list
    })
  }
  delTodo = (id) => {
    let list = this.state.list;
    this.setState({
      list: list.filter(el => el.id !== id)
    })
  }
  render() {
    return (
      <View>
        <View className='header'><Text>TodoList React</Text></View>
        <CustomInput addTodo={this.addTodo}></CustomInput>
        <CustomList list={this.state.list} delTodo={this.delTodo}></CustomList>
      </View>
    )
  }
}

export default Todo;